'use client'
import { useState, useEffect } from 'react'
import Image from 'next/image'
import logoIcon from '@/public/img/logo-icon.png'
import userAvatar from '@/public/img/user-avatar.png'
import Link from 'next/link'
import classNames from 'classnames'
import { LuChevronRight, LuMenu, LuX } from "react-icons/lu";

const Header = () => {
  const [isOpen, setIsOpen] = useState(false)
  useEffect(() => {
    // 当isOpen为true时，开启滚动锁定
    if (isOpen) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = 'auto'
    }
  }, [isOpen])
  return (
    <header className='bg-white sticky top-0 z-20'>
      <div className='w w-container relative'>
        <div className='flex justify-between items-center h-[60px] md:h-[80px]'>
          <div className='relative z-20 flex items-center mr-8'>
            <Image className='h-[40px] w-auto' src={logoIcon} alt='logo' />
          </div>
          <div className='md:hidden absolute right-2 top-1/2 -translate-y-1/2 z-20' onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? <LuX className='text-2xl' /> : <LuMenu className='text-2xl' />}
          </div>
          <div className={classNames('w-container fixed md:static inset-0 left-[-100%] w-full bg-white md:bg-transparent z-10 transition-all duration-300 flex flex-col md:flex-row md:items-center md:justify-between md:gap-4', {
            '!left-0': isOpen
          })}>
            {/* 手机端占位 */}
            <div className='md:hidden h-[60px] md:h-[80px]' />
            {/* user info */}
            <div className='md:hidden border-t border-[#ccc]/30 md:border-none py-4 flex items-center gap-4'>
              <Image className='w-[80px] h-[80px] rounded-full object-cover border border-[#ccc]/30' src={userAvatar} alt='user' />
              <div className='flex items-center justify-between w-full'>
                <div>
                  <p className='h3'>韩立</p>
                  <p className='text-[#999] text-sm'>hanli@163.com</p>
                </div>
                <LuChevronRight className='text-2xl text-[#999]' />
              </div>
            </div>
            {/* 导航菜单 */}
            <ul className='flex flex-col md:flex-row md:items-center border-t border-[#ccc]/30 md:border-none md:gap-4'>
              <li>
                <Link className='inline-block py-2 link' href='/'>首页</Link>
              </li>
              <li>
                <Link className='inline-block py-2 link' href='/'>关于我们</Link>
              </li>
              <li>
                <Link className='inline-block py-2 link' href='/'>联系我们</Link>
              </li>
              <li>
                <Link className='inline-block py-2 link' href='/'>加入我们</Link>
              </li>
              <li>
                <Link className='inline-block py-2 link' href='/'>帮助中心</Link>
              </li>
              <li>
                <Link className='inline-block py-2 link' href='/'>隐私政策</Link>
              </li>
            </ul>
            {/* 登录注册 */}
            <ul className='flex flex-col md:flex-row md:items-center border-t border-[#ccc]/30 md:border-none md:gap-4'>
              <li>
                <Link className='inline-block py-2 link' href='/'>登录</Link>
              </li>
              <li>
                <Link className='inline-block py-2 link' href='/'>注册</Link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>
  )
}

export default Header